<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM元素节点属性</title>
    <style>
      div {
        width: 400px;
        margin: 50px auto;
        padding: 20px;
      }
      #id1 {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="id1" some-attribute="abc">
      <p>文本框：<input type="text" name="username" value="admin" /></p>
    </div>
    <script>
      const div = document.getElementById("id1");
      // 1: 关于内容的属性

      // innerHTML属性：DOM对象对应HTML标签的内部HTML内容
      console.log(div.innerHTML);
      // 修改该属性值，会修改对应HTML标签的内部内容
      // div.innerHTML = "<p>修改内容</p>";

      // outerHTML属性：DOMDOM对象对应HTML标签自身HTML内容
      console.log(div.outerHTML); // div.outerHTML = "<p>修改内容</p>";
      // 修改该属性值，会替换该标签

      // textContext
      console.log(div.textContent);

      // 2: html tag standard attribute <-> dom object property
      // same name, same value
      console.log(div.id);
      div.id = "id2";

      console.log(div.someAttribute);
    </script>
  </body>
</html>
